<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">


    <title>X+约课系统 - 添加会员卡</title>
    <meta content="后台bootstrap框架,会员中心主题,后台HTML,响应式后台" name="keywords">
    <meta content="完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术" name="description">

    <link href="../../static/favicon.ico" rel="shortcut icon" th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"
          th:href="@{/static/css/bootstrap.min.css(v='3.3.6')}">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"
          th:href="@{/static/css/font-awesome.css(v='4.4.0')}">
    <link href="../../static/css/animate.css" rel="stylesheet" th:href="@{/static/css/animate.css}">
    <link href="../../static/css/style.css?v=4.1.0" rel="stylesheet" th:href="@{/static/css/style.css(v='4.1.0')}">

    <link href="../../static/css/plugins/iCheck/custom.css" rel="stylesheet"
          th:href="@{/static/css/plugins/iCheck/custom.css}">
    <!-- Data Tables -->
    <link href="../../static/css/plugins/dataTables/dataTables.bootstrap.css"
          rel="stylesheet" th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}">
    <!-- Sweet Alert -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css" th:href="@{/static/css/plugins/sweetalert/sweetalert.css}" rel="stylesheet">


    <style type="text/css">
        .margin_top {
            margin-top: 35px;
        }

        .margin_buttom {
            margin-bottom: 35px;
        }

        .input_margin_top {
            margin-top: 20px;
        }

        .input_width {
            width: 50px;
            display: inline;
        }

        .btn_margin_top {
            margin-top: -25px;
        }

        table.dataTable thead .sorting,
        table.dataTable thead .sorting_asc,
        table.dataTable thead .sorting_desc {
            background-image: none;
        }

        input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {

            -webkit-appearance: none !important;

        }

        /* chrome */

        input[type="number"] {

            -moz-appearance: textfield; /* firefox */

        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <form class="form-horizontal" id="addForm" method="post">
                <div style="background-color: #FFFFFF;">
                    <div class="form-group">
                        <label class="col-sm-2 control-label margin_top"
                               for="inputCardName"><span
                                style="color: red">*&nbsp;</span>会员卡名称</label>
                        <div class="col-sm-6">
                            <input class="form-control margin_top" id="inputCardName" name="name" placeholder="会员卡名称"
                                   required
                                   type="text">
                            <span class="text-danger">[[${NAME_EXIST}]]</span>
                        </div>
                        <div class="col-sm-4">
                            <label class="control-label" tip="name"></label>
                        </div>
                    </div>
                    <!--价格-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="inputCardPrice"><span
                                style="color: red">*&nbsp;</span>价格</label>
                        <div class="col-md-4">
                            <div class="input-group input_margin_top">
                                <div class="input-group-addon">￥</div>
                                <input class="form-control" id="inputCardPrice" min="0" name="price"
                                       placeholder="价格" step="0.01" type="number">
                                <div class="input-group-addon">元</div>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <label class="control-label" tip="price"></label>
                        </div>
                    </div>
                    <!--描述信息-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="inputCardDescribe">描述信息</label>
                        <div class="col-sm-8">
                            <textarea class="form-control input_margin_top" id="inputCardDescribe"
                                      name="description"></textarea>
                        </div>
                    </div>
                    <!--备注信息-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="inputCardRemark">备注信息</label>
                        <div class="col-sm-8">
                            <textarea class="form-control input_margin_top margin_buttom" id="inputCardRemark"
                                      name="note"></textarea>
                        </div>
                    </div>
                </div>
                <div style="background-color: #FFFFFF;">
                    <!--会员卡类型-->
                    <div class="form-group">
                        <div class="margin_top">
                            <label class="col-sm-2 control-label " for="member_card_type">会员卡类型</label>
                            <div class="col-sm-6">
                                <div class="input-group">
                                    <input class="form-control " id="test_data" name="type" type="text">
                                    <div class="input-group-btn ">
                                        <button class="btn btn-white dropdown-toggle " data-toggle="dropdown"
                                                id="member_card_type"
                                                type="button">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right " role="menu">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <label class="control-label" tip="type"></label>
                            </div>
                        </div>
                    </div>

                    <!--可用次数-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="useTimes"><span
                                style="color: red">*&nbsp;</span>可用次数</label>
                        <div class="col-sm-2">
                            <input class="form-control input_margin_top" id="useTimes" min="0" name="totalCount"
                                   placeholder="可用次数" required
                                   type="number">
                        </div>
                        <div class="col-sm-4">
                            <label class="control-label" tip="totalCount"></label>
                        </div>
                    </div>
                    <!--可用天数-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="useDays"><span
                                style="color: red">*&nbsp;</span>可用天数</label>
                        <div class="col-sm-2">
                            <input class="form-control input_margin_top" id="useDays" min="0" name="totalDay"
                                   placeholder="可用天数" required
                                   type="number">
                        </div>
                        <div class="col-sm-4">
                            <label class="control-label" tip="totalDay"></label>
                        </div>
                    </div>
                    <!--支持课程-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label input_margin_top" for="support_program">支持课程</label>
                        <div class="col-sm-8 input_margin_top">
                            <table class="table table-striped table-bordered table-hover dataTables-example"
                                   id="support_program">
                                <thead>
                                <tr>
                                    <th><input class="i-checks" id="check_all" name="courseListStr" type="checkbox" value="-1">
                                    </th>
                                    <th class="col-sm-7">课程</th>
                                    <th>收费情况(次卡)</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <!--保存、取消-->
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10 margin_buttom btn_margin_top">
                            <button class="btn btn-success" id="saveBtn" type="submit">保存</button>
                            <a class="btn btn-default" href="x_member_card.do" type="button">取消</a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4" th:src="@{/static/js/jquery.min.js(v='2.1.4')}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6" th:src="@{/static/js/bootstrap.min.js(v='3.3.6')}"></script>

<!-- 自定义js -->
<script src="../../static/js/content.js?v=1.0.0" th:src="@{/static/js/content.js(v='1.0.0')}"></script>
<!-- Data Tables -->
<script src="../../static/js/plugins/dataTables/jquery.dataTables.js"
        th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>
<script src="../../static/js/plugins/dataTables/dataTables.bootstrap.js"
        th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>
<!--suggest-->
<script src="../../static/js/plugins/suggest/bootstrap-suggest.min.js"
        th:src="@{/static/js/plugins/suggest/bootstrap-suggest.min.js}"></script>
<!-- iCheck -->
<script src="../../static/js/plugins/iCheck/icheck.min.js" th:src="@{/static/js/plugins/iCheck/icheck.min.js}"></script>
<!-- Sweet alert -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js" th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>
<script>
    $(function () {
        /*表单序列化*/
        var addForm = "";
        $("#saveBtn").on("mouseenter", function () {
            addForm = $("#addForm").serialize();
            console.log(addForm);
        });


        //获取所有的课程数据
        $.post("/course/courseList.do", function (courseData) {
            console.log(courseData);
            $('.dataTables-example').dataTable({
                //获取数据
                "data": courseData.data,
                //行的定义
                "columns": [
                    {
                        "data": "id", "render": function (data, type, row) {
                            /* 参数说明
                                data: 拿到的是左边指明的"data"的字段对应的全部值
                                row: 拿到的是dataTable的"data"属性获取到的每一行值
                            */
                            var id = data;
                            var html = "<input type='checkbox' name='courseListStr' class='i-checks' id='check_all' value='" + id + "'>";
                            return html;
                        }, bAutoWidth: "false", sWidth: "1%"
                    },
                    {"data": "name", sWidth: "15%"},
                    {
                        "data": "timesCost", "render": function (data, type, row) {
                            var html = "<span class='pie'>每节课收取&nbsp;<input type='text' class='form-control input-sm' value='" + data + "'>次/人</span>";
                            return html;
                        }, sWidth: "15%"
                    }
                ],
                language: {
                    "emptyTable": "没有数据哟~~",//没有数据时要显示的字符串
                    "loadingRecords": "加载中...",//用来描述数据在加载中等待的提示字符串 - 当异步读取数据的时候显示
                    "processing": "处理中...",//用来描述加载进度的字符串
                    "sInfo": "",// 这样就可以隐藏了
                },
                searching: false,//是否开始本地搜索
                paging: false,
                lengthChange: false,//是否允许用户改变表格每页显示的记录数
                columnDefs: [{
                    targets: 0,//编辑取消排序
                    "orderable": false
                }]
            });
        });


        //--异步保存编辑操作//todo swal
        $('#addForm').on('submit', function (e) {
            e.preventDefault();
            var formData = $(this).serialize();

            swal({
                title: "确认保存",
                text: "确认保存此会员卡信息吗? 您正在新建一张新的会员卡！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#08c6d8",
                confirmButtonText: "添加",
                closeOnConfirm: true
            }, function () {
                $.ajax({
                    url: '[[${#request.getContextPath()}]]/card/cardAdd.do',
                    type: "post",
                    data: formData,
                    success: function (data) {
                        if (data.code === 0) {
                            setTimeout(function () {}, 100);
                            swal(data.msg, "您已经创建了这一张新的会员卡。", "success");
                            //刷新界面
                            setTimeout(function () {
                                window.location.href = '[[${#request.getContextPath()}]]/card/x_member_card.do'
                            }, 1500);
                        } else if (data.code === 400) {
                            let errors = data.errorMap;
                            for (const key in errors) {
                                $(`[tip=${key}]`).html("");
                                //错误提示回显
                                $("<span class='text-danger'>" + errors[key] + "</span>").appendTo($("[tip=" + key + "]"));
                            }
                        }else {
                            swal(data.msg, "未知错误", "info")
                            setTimeout(function () {
                                window.location.reload();
                            },1200);
                        }
                    },
                    error: function () {
                        swal("添加失败！", "未知错误。。。", "info");
                        setTimeout(function () {
                            window.location.reload();
                        });
                    }
                });
            });
        })


    });
</script>
<script type="text/javascript">
    //data 数据中获取
    var testdataBsSuggest = $("#test_data").bsSuggest({
        indexId: 2, //data.value 的第几个数据，作为input输入框的内容
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        data: {
            'value': [
                {
                    'id': '0',
                    'card_type': '次卡(有期限)'
                },
                {
                    'id': '1',
                    'word': '次卡(无期限)'
                }
            ],
            'defaults': '次卡(有期限)'
        },
    });
</script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        //复选框 全选
        $('#check_all').on('ifChecked', function (event) {
            $('input').iCheck('check');
        });
        //复选框 反选
        $('#check_all').on('ifUnchecked', function (event) {
            $('input').iCheck('uncheck');
        });
    });
</script>
</body>
</html>
